<template>
  <div>
    <cube-page :title="title" />

    <div class="view-wrapper">
      <cube-sticky
        :pos="scrollY"
        :check-top="checkTop"
        fixed-show-ani="sticky-fixed-show"
      >
        <cube-scroll :scroll-events="scrollEvents">
          <div class="cube-index-list-content">
            <!---->
            <ul>
              <!-- 基础信息 -->
              <li class="cube-index-list-group">
                <div class="cube-index-list-anchor">
                  基础信息
                </div>

                <ul>
                  <li class="mineitem">
                    <span class="minetitle">
                      头像
                      <img :src="infoData.icon" :onerror="avatarImage" />
                    </span>

                    <!-- <i class="cubeic-arrow"></i> -->
                  </li>
                </ul>
                <ul>
                  <li class="mineitem">
                    <span class="minetitle">
                      姓名
                      <span>{{ infoData.name }}</span>
                    </span>
                  </li>
                </ul>
                <ul>
                  <li class="mineitem">
                    <span class="minetitle">
                      证件号码
                      <span class="long">{{ infoData.idCard }}</span>
                    </span>
                  </li>
                </ul>
                <ul>
                  <li class="mineitem">
                    <span class="minetitle">
                      性别
                      <span>{{ infoData.sex == 1 ? "男" : "女" }}</span>
                    </span>
                  </li>
                </ul>
                <ul>
                  <li class="mineitem">
                    <span class="minetitle">
                      生日
                      <span>{{
                        infoData.birthday | dateFormat("yyyy-MM-dd")
                      }}</span>
                    </span>
                  </li>
                </ul>
                <ul>
                  <li class="mineitem">
                    <span class="minetitle">
                      民族
                      <span>{{ infoData.ethnic }}</span>
                    </span>
                  </li>
                </ul>
                <ul>
                  <li class="mineitem">
                    <span class="minetitle">
                      户籍省份
                      <span>{{ infoData.province }}</span>
                    </span>
                  </li>
                </ul>
                <ul>
                  <li class="mineitem">
                    <span class="minetitle">
                      户籍城市
                      <span>{{ infoData.city }}</span>
                    </span>
                  </li>
                </ul>
                <ul>
                  <li class="mineitem">
                    <span class="minetitle">
                      文化程度
                      <span>{{ infoData.degreeEducation }}</span>
                    </span>
                  </li>
                </ul>
                <ul>
                  <li class="mineitem">
                    <span class="minetitle">
                      政治面貌
                      <span>{{ infoData.politicsStatus }}</span>
                    </span>
                  </li>
                </ul>
              </li>

              <!-- 联系信息 -->
              <li class="cube-index-list-group">
                <div class="cube-index-list-anchor">
                  联系信息
                </div>

                <ul>
                  <li class="mineitem">
                    <span class="minetitle">
                      手机号码
                      <span>{{ infoData.phone }}</span>
                    </span>
                  </li>
                </ul>
                <ul>
                  <li class="mineitem">
                    <span class="minetitle">
                      邮箱
                      <span>{{ infoData.email }}</span>
                    </span>
                  </li>
                </ul>
                <ul>
                  <li class="mineitem">
                    <span class="minetitle">
                      QQ号
                      <span>{{ infoData.qq }}</span>
                    </span>
                  </li>
                </ul>
                <ul>
                  <li class="mineitem">
                    <span class="minetitle">
                      联系地址
                      <span class="long">{{ infoData.address }}</span>
                    </span>
                  </li>
                </ul>
                <ul>
                  <li class="mineitem">
                    <span class="minetitle">
                      紧急联系人电话
                      <span>{{ infoData.emergencyPhone }}</span>
                    </span>
                  </li>
                </ul>
                <ul>
                  <li class="mineitem">
                    <span class="minetitle">
                      紧急联系人地址
                      <span class="long">{{ infoData.emergencyAddress }}</span>
                    </span>
                  </li>
                </ul>
              </li>

              <!-- 学籍信息 -->
              <li class="cube-index-list-group">
                <div class="cube-index-list-anchor">
                  学籍信息
                </div>

                <ul>
                  <li class="mineitem">
                    <span class="minetitle">
                      学号
                      <span>{{ infoData.number }}</span>
                    </span>
                  </li>
                </ul>
                <ul>
                  <li class="mineitem">
                    <span class="minetitle">
                      学制
                      <span>{{ infoData.lengthSchooling }}</span>
                    </span>
                  </li>
                </ul>
                <ul>
                  <li class="mineitem">
                    <span class="minetitle">
                      学习形式
                      <span>{{ infoData.studyMode }}</span>
                    </span>
                  </li>
                </ul>
                <!-- <ul>
                  <li class="mineitem">
                    <span class="minetitle">
                      培养层次
                      <span>{{ infoData.educationLevel }}</span>
                    </span>
                  </li>
                </ul> -->
                <ul>
                  <li class="mineitem">
                    <span class="minetitle">
                      专业
                      <span>{{ infoData.majorName }}</span>
                    </span>
                  </li>
                </ul>
                <ul>
                  <li class="mineitem">
                    <span class="minetitle">
                      学籍号
                      <span>{{ infoData.eduStuId }}</span>
                    </span>
                  </li>
                </ul>
                <ul>
                  <li class="mineitem">
                    <span class="minetitle">
                      站点
                      <span class="long">{{ infoData.centerName }}</span>
                    </span>
                  </li>
                </ul>
                <ul>
                  <li class="mineitem">
                    <span class="minetitle">
                      班级
                      <span class="multiLine">{{ infoData.myClass }}</span>
                    </span>
                  </li>
                </ul>
                <!-- <ul>
                  <li class="mineitem">
                    <span class="minetitle">
                      入学时间
                      <span>{{
                        infoData.enterDate | dateFormat("yyyy-MM-dd")
                      }}</span>
                    </span>
                  </li>
                </ul>
                <ul>
                  <li class="mineitem">
                    <span class="minetitle">
                      毕业时间
                      <span>{{
                        infoData.graduationDate | dateFormat("yyyy-MM-dd")
                      }}</span>
                    </span>
                  </li>
                </ul> -->
              </li>
            </ul>
          </div>
        </cube-scroll>
        <ul class="sticky-header" slot="fixed" ref="stickyHeader">
          <li>header</li>
        </ul>
      </cube-sticky>
    </div>
  </div>
</template>

<script>
import CubePage from "../components/cube-page.vue";
import { getProfile } from "../api/user";

export default {
  components: {
    CubePage
  },
  data() {
    return {
      title: "个人信息",
      scrollEvents: ["scroll"],
      scrollY: 0,
      checkTop: true,
      infoData: {},
      avatarImage: 'this.src="' + require("@/assets/icon_avatar.png") + '"'
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      getProfile()
        .then(response => {
          console.log(response);
          this.infoData = response.data;
        })
        .catch(error => {
          console.log(error);
          this.$toastErrorCode(error);
        });
    }
  }
};
</script>

<style lang="stylus" scoped>
.view-wrapper {
  position: fixed;
  top: 44px;
  left: 0;
  bottom: 0;
  width: 100%;

  .index-list-wrapper {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
}

.mineitem {
  font-size: 12px;
  text-align: left;
  height: 50px;
  line-height: 50px;
  padding-left: 5%;
  border-bottom: 1px solid #eee;

  .minetitle {
    display: inline-block;
    width: 90%;
    float: left;
    color: #555;

    img {
      position: absolute;
      right: 10px;
      width: 40px;
      height: 40px;
      // border-radius: 50%;
      margin-top: 5px;
    }

    span {
      font-size: 14px;
      position: fixed;
      right: 10px;
      color: #000;
    }

    .long {
      font-size: 12px;
    }

    .multiLine {
      font-size: 12px;
      line-height: 14px;
      left: 100px;
      vertical-align: middle;
      margin-top: 12px;
    }
  }
}

.cube-index-list-anchor {
  background: #f7f7f7;
  color: #666;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
  padding: 0 0 0 10px;
  font-weight: bold;
}
</style>
